<template>
  <!-- 登录流程
1：定义api
2：导入
3：在表单验证通过后调用
4：调用成功
    存储token存储到vuex   并存储到浏览器（持久化）
    提示一下
    跳转到首页
 -->
  <div class="login">
    <div
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="form"
    >
      <img class="logo" src="@/assets/common/login-logo.png" alt="">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="mobile">
          <el-input v-model="form.mobile" prefix-icon="el-icon-user-solid" />
        </el-form-item>
        <el-form-item prop="password">
          <!-- el-input并不是input
          .native    :修饰符，作用让组件使用原生的事件
          -->
          <el-input
            v-model="form.password"
            prefix-icon="el-icon-lock"
            show-password
            @keyup.enter.native="submit"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="primary" @click="submit">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="tip">默认帐号:13800000002,密码:123456</div>
    </div>
  </div>
</template>
<script>
// import { sysLoginPost } from '@/api/login'
// 弱网络环境下解决方案：最简单就是加loading
export default {
  components: {},
  data() {
    return {
      loading: false,
      form: {
        mobile: '13800000002', //	string	必须		手机号
        password: '123456' //	string	必须		密码
      },
      rules: {
        mobile: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请正确输入手机号',
            trigger: 'change'
          }
        ],
        password: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          },
          {
            min: 6,
            max: 12,
            message: '请输入6-12位密码',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    // 登录点击事件
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          // sysLoginPost(this.form)
          //   .then((res) => {
          //     this.$store.commit('user/setToken', res.data)
          //     // toast   this.$toast.success('内容')
          //     // message this.$message.success('内容')
          //     this.$message.success('登录成功')
          //     this.$router.push('/')
          //   })
          //   .catch((error) => {
          //     console.log(error)
          //   })

          // const res = await sysLoginPost(this.form)
          // this.$store.commit('user/setToken', res.data)
          // 调用actions
          // 不加await 后面的提示与跳转与接口调用会同时执行
          // 加await 等到接口调用执行完成后执行提示与跳转
          // 接口调用出错，中止后面的执行
          this.loading = true
          try {
            await this.$store.dispatch('user/toLogin', this.form)
            this.loading = false
            this.$message.success('登录成功')
            /*
            路由传参
               path传参
                 传
                   this.$router.push('/path?参数名:值')
                 收
                   this.$route.query.参数名
               动态路由匹配
                  配制路由
                    {
                      path:'/path/:id'
                    }
                   传：this.$router.push('/path/123')
                   收：this.$route.params.id
               name传参
                  配制
                    {
                      name:'path',
                      path:'/path'
                    }
                   query:通过url传值
                   传:
                      this.$router.push({
                        name:'path',
                        query:{
                          参数名:值
                        }
                      })
                    收：this.$route.query.参数名
                   params：通过内存中传递，
                       好：没有数据类型的限制。没有数据大小限制
                       坏：刷新数据就没了
                   传：
                      this.$router.push({
                        name:'path',
                        params:{
                          参数名:值
                        }
                      })
                    收：this.$route.params.参数名
            */
            this.$router.push(this.$route.query.back || '/')
          } catch {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// scoped:作用让它的style样式只作用于当前组件和子组件最外层
// scoped   v-html的东西能管到吗，也是管不到
// scoped:看得到的可管到，看不到的管不到，组件相当于看到了最外层
/*
@:代表src
  @代表src,js,html中是代表src,但是style中 ~@代表src
  新版本的脚手架：@在所有地方都代表src  webpack5的版本
*/
.login {
  background-image: url('~@/assets/common/login.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  // cover:空间铺满，多余的会裁切
  // contain：图片完整显示
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .form {
    width: 500px;
    text-align: center;
    .logo {
      padding-bottom: 20px;
    }
    .btn {
      width: 100%;
      padding: 20px 0;
      font-size: 24px;
    }
    ::v-deep .el-button--primary {
      background-color: #407ffe;
      border-color: #407ffe;
    }
    ::v-deep .el-input__inner {
      height: 55px;
    }
  }
}
::v-deep .el-form-item__error {
  color: #fff;
}
.tip {
  color: #fff;
}
</style>
